<template>
  <div class="home">
    <div class="header">智耕视界-3D农仓可视化管理系统
    </div>
 
    <div class="home_left">
      <div>
        <!-- 动态环形图 -->
        <store-tag
          v-for="item in getStoreListDate"
          :key="item.store_id"
          :id="item.store_id"
          :storeTotal="item.total_grid"
          :useGoods="item.use_grid"
          :store_name="item.store_name"
        />
      </div>


    </div>
    <div class="home_right">
      <div>
        <div>
          <div class="home_right_warn">
            <span>
              <img src="@/assets/image/run.png" alt="" />
            </span>
            <p class="warn_tt">仓库日志</p>
            <img src="~@/assets/image/box1_bg.png" alt="" />
            <div class="context">
              <!--信息滚动-->
              <TextTag></TextTag>
            </div>
          </div>
        </div>
        <div>
          <div class="home_right_status">
            <!-- 标题 -->
            <span>
              <img src="~@/assets/image/warn.png" alt="" />
            </span>
            <p class="status_tt">商品保质期</p>
            <!-- 背景 -->
            <div class="home_right_status_img">
              <img src="~@/assets/image/box3_bg.png" alt="" />
              <div class="home_right_status_img_context">
                <!-- 柱状图组件 -->
                <div
                  v-for="item in getGoodsLogDateTimeDate"
                  :key="item.store_id"
                >
                  <p class="home_right_status_img_context_title">
                    <i></i>{{ item.store_name }}
                  </p>
                  <histogram
                    :histogramId="'histogram' + item.store_id"
                    :expired="item.expired"
                    :normal="item.normal"
                    :will_expire="item.will_expire"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="home_center1">
    <div ref="chart" style="width: 100%; height: 270%;"></div>
   
  </div>
  
  <div class="home_center">
    <div ref="chart2" style="width: 200%; height: 280%;"></div>
    <div ref="chart1" style="width: 100%; height: 282%;"></div>
   
  </div>
    <div class="home_bottom">
   
      <div
        class="button"
        :style="{ '--transform': 'rotate(' + Math.random() * 360 + 'deg)' }"
        v-for="store in storeList"
        :key="store.id"
      >
        <router-link :to="'/store?id=' + store.id">
          {{ store.name }}
        </router-link>
      </div>
    </div>
   
  </div>
</template>

<script>

import * as echarts from 'echarts';

import StoreTag from "@/views/home/components/storeTag";
import TextTag from "@/views/home/components/textScrolling";
import histogram from "@/views/home/components/histogram";
import { ref } from "vue";
// import { useStore } from "vuex";
import { getStoreListApi, getStoreTotalApi } from "@/api/store";
import { getStoreShelfTotalApi } from "@/api/shelf";
import { getGoodsLogTotalApi } from "@/api/goods";
export default {
  mounted() {
    this.initChart();    this.initChart1();this.initChart2();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      
const  option = {
    title: {
        text: '出入库情况',
        textStyle: {
            color: 'white'
        },
        top: -4
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20%',
        containLabel: true
    },
    legend: {
        data: ['出库', '入库', '果蔬仓出库', '果蔬仓入库'],
        textStyle: {
            color: "#fff"
        }
    },
    xAxis: [{
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ebf8ac" // X轴文字颜色
            }
        },
        axisLine: {
            lineStyle: {
                color: '#01FCE3'
            }
        },
    }],
    yAxis: [
        {
            type: 'value',

            axisLabel: {
                textStyle: {
                    color: "#2EC7C9" // X轴文字颜色
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#01FCE3'
                }
            },
        },
        {
            type: 'value',
            name: '果蔬仓出入库',
            axisLabel: {
                textStyle: {
                    color: "#2EC7C9" // X轴文字颜色
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#01FCE3'
                }
            },
        }
    ],
    series: [
        {
            name: '入库',
            type: 'line',
            yAxisIndex: 0,
            data: [664, 687, 1407, 1506, 1762, 1207, 1308, 480, 753, 603, 463, 1313],
            lineStyle: {
                normal: {
                    width: 5,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#F8B854' // 0% 处的颜色
                        }, {
                            offset: 0.4,
                            color: '#DE801C' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: '#DE801C' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(71,216,190, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#F7AD3E',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                    borderColor: "#F7AD3E"
                }
            },
            smooth: true,
        },
        {
            name: '出库',
            type: 'line',
            yAxisIndex: 1,
            data: [624, 667, 1207, 1306, 1502, 1107, 1208, 480, 703, 503, 463, 1013],
            lineStyle: {
                normal: {
                    width: 5,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#AAF487' // 0% 处的颜色
                        }, {
                            offset: 0.4,
                            color: '#47D8BE' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: '#47D8BE' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(71,216,190, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#AAF487',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                    borderColor: "#AAF487"
                }
            },
            smooth: true,
        }, {
            name: '果蔬仓出库',
            type: 'bar',
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#00FFE3"
                    }, {
                        offset: 1,
                        color: "#4693EC"
                    }])
                }  , 
            },data: [284, 297, 757, 796, 872, 477, 548, 190, 373, 363, 223, 613, 41.3, 193, 393, 273, 183, 863, 723, 643, 543, 413, 346],
            
        },
                {
                    name: '果蔬仓入库',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#C1B2EA"
                            },
                                {
                                    offset: 1,
                                    color: "#8362C6"
                                }
                            ])
                        }
                    },data: [264, 287, 707, 756, 822, 487, 588, 160, 323, 303, 213, 663, 413, 153, 303, 223, 123, 823, 723, 623, 523, 423, 366]
                 
                },
            ]
        };

chart.setOption(option);


    },

    initChart1() {
      const chart1 = echarts.init(this.$refs.chart1);  
      const option1 = {tooltip: {
    trigger: 'item'
  },
  legend: {  textStyle: {
            color: '#ffffff' // 设置图例文字颜色为白色
        },
    top: '5%',
    left: 'center'
  },color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262','#c25775','#00b7be'],	
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10,
       
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '果蔬仓' },
        { value: 735, name: '农药仓' },
        { value: 580, name: '化肥仓' },

      ]
    }
  ]
};
      
      
      chart1.setOption(option1);
    },
    initChart2() {
      const chart2 = echarts.init(this.$refs.chart2);
      
const option2 = {
  title: {
    text: '果蔬仓销量情况',
    textStyle: {
      color: 'white'
    }} ,color: ['#5470c6', '#fc8452', '#9a60b4','#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  tooltip : {

trigger: 'axis',

axisPointer : {            // 坐标轴指示器，坐标轴触发有效

    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

}

},

legend: {
    textStyle: {
      color: '#ffffff', // 设置图例文字颜色为白色
      fontSize: 8 // 设置图例文字字体大小为12px
    },
    top: '10%',
    left: 'center'
  },

toolbox: {

show : true,

feature : {

    mark : {show: true},

    dataView : {show: true, readOnly: false},

    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

    restore : {show: true},

    saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [

{

    type : 'value',
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      }

}

],

yAxis : [

{

    type : 'category',

    data : ['周一','周二','周三','周四','周五','周六','周日'],
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      }

}

],

series : [

{

    name:'苹果',

    type:'bar',

    stack: '总量',

    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

    data:[320, 302, 301, 334, 390, 330, 320]

},

{

    name:'荔枝',

    type:'bar',

    stack: '总量',

    itemStyle : { normal: {label : {show:true, position: 'insideRight'}}},

    data:[120, 132, 101, 134, 90, 230, 210]

},

{

    name:'白菜',

    type:'bar',

    stack: '总量',

    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

    data:[220, 182, 191, 234, 290, 330, 310]

},

{

    name:'娃娃菜',

    type:'bar',

    stack: '总量',

    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

    data:[150, 212, 201, 154, 190, 330, 410]

},

{

    name:'韭菜',

    type:'bar',

    stack: '总量',

    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

    data:[820, 832, 901, 934, 1290, 1330, 1320]

}

]
};
chart2.setOption(option2);


    },

  },
  components: { StoreTag, TextTag, histogram },
  setup() {
    const getStoreListDate = ref([]);
    const getStoreShelfDate = ref([]);
    const getGoodsLogDate = ref("");
    const getGoodsLogDateTimeDate = ref([]);
    const storeList = ref([]);
    // const store = useStore();
    //获取仓库使用数据信息
    getStoreTotalApi().then((res) => {
      console.log(res);
      if (res.status === 200) {
        getStoreListDate.value = res.data.list;
      }
    });
    //获取仓库运行状态
    getStoreShelfTotalApi().then((res) => {
      console.log(res);
      if (res.status === 200) {
        getStoreShelfDate.value = res.data.list;
      }
    });
    //获取仓库商品统计
    getGoodsLogTotalApi().then((res) => {
      if (res.status === 200) {
        getGoodsLogDateTimeDate.value = res.data.list;
        console.log(getGoodsLogDateTimeDate.value);
      }
    });
    // 获取仓库列表
    // store.dispatch("store/getStoreList");
    // const storeList = computed(() => store.state.store.storeList);
    getStoreListApi().then((res) => {
      console.log(res);
      if (res.status === 200) {
        storeList.value = res.data;
      }
    });

    return {
      getStoreListDate,
      getStoreShelfDate,
      getGoodsLogDate,
      getGoodsLogDateTimeDate,
      storeList,
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/image/bg.png");
  background-size: 100% 100%;
  overflow: hidden;
}

.header {
  position: absolute;
  width: 100%;


  height: 7%;
  line-height: 4rem;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  background-image: url("~@/assets/image/title_bg.png");
  background-size: 100% 100%;
  user-select: none;
  span {
    float: right;
    font-size: 1.4rem;
  }
}

.home_left {
  float: left;
  margin-top: 8%;
  margin-left: 5%;
  width: 20%;
  height: 80%;
  > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    flex-direction: column;
    justify-content: space-between; /* 子元素在横轴上两端对齐 */
  }
}
.home_right {
  float: right;
  margin-top: 8%;
  margin-right: 5%;
  width: 20%;
  height: 80%;
  > div {
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    flex-direction: column;
    justify-content: space-between; /* 子元素在横轴上两端对齐 */

    > div {
      width: 100%;
    }
  }

  .home_right_warn {
    position: relative;
    width: 100%;
    > span {
      position: absolute;
      top: 10%;
      left: 35%;
      width: 1rem;
      height: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .warn_tt {
      position: absolute;
      top: 10%;
      left: 44%;
      color: #00ffff;
      font-size: 1rem;
    }
  }
}.home_center {   display: flex;
    margin: 30px 450px 1px;
    border: 1px solid rgb(6, 222, 246); /* 设置边框颜色为黑色 */
    border-radius: 10px; /* 设置圆角半径为10像素 */
    background-color: rgba(6, 190, 193, 0.2);
    padding-top: 1%;
} .home_center1 {
  margin: 160px 27% 10px;
  border: 1px solid rgb(6, 222, 246); /* 设置边框颜色为黑色 */
  border-radius: 10px; /* 设置圆角半径为10像素 */
  background-color: rgba(6, 190, 193, 0.2);

  padding-top: 2%;
}

// 图片的处理
.home img {
  border-radius: 7%;
  width: 100%;
}
.context {
  position: absolute;
  top: 3.5rem;
  left: 8%;
  width: 84%;
  height: 60%;
}

// 运行状态
.home_right_status {
  position: relative;
  width: 100%;
  > span {
    position: absolute;
    top: 4%;
    left: 35%;
    width: 1rem;
    height: 1rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .status_tt {
    position: absolute;
    top: 4%;
    left: 44%;
    color: #00ffff;
    font-size: 1rem;
  }
}

.home_right_status_img_context {
  position: absolute;
  top: 16%;
  left: 2rem;
  width: 100%;
  > div {
    height: 30%;
  }
}

.home_right_status_img_context_title {
  //margin:0 0 0 -70%
  margin-top: -0.3rem;
  margin-bottom: 0;
  text-align: left;
  color: #fff;
  ::before {
    content: " ";
    display: inline-block;
    width: 0.5rem;
    height: 0.3rem;
    border-radius: 50%;
  }
}

.home_bottom {
  width: 50rem;
  height: 5rem;
  //background-color:red;
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translate(-50%, -50%);
  color: #fff;
  .button {
    float: left;
    margin: 0 10%;
    text-align: center;
    padding-left: 1rem;
    position: relative;
    width: 6rem;
    height: 6rem;
    ::before {
      content: "";
      width: 6rem;
      height: 6rem;
      background-image: url("~@/assets/image/circle.png");
      background-size: 6rem;
      position: absolute;
      top: 0;
      left: 0;
      transform: var(--transform);
    }
    a {
      display: inline-block;
      padding: 50% 0;
      margin-left: -1rem;
      color: #fff;
    }
  }
}
</style>
